.home-container{
  .block{
    margin-bottom: 20rpx;
  }
  .sticky-wrapper{
    position: sticky;
    z-index: 9;
  }

  .nav-block{
    @include flex;
    @include a-center;
    height: 100%;
    padding:  0 10px;
    /* #ifdef MP-WEIXIN */
    margin-right: 107px;
    /* #endif */

    .search-block{
      @include sub-item;
    }
    .btn{
      @include flex(column);
      @include center;
      color: #000;
      font-size: 20rpx;
      width: 74rpx;

      image{
        width: 26rpx;
        height: 26rpx;
      }

      &.btn-is-light{
        color: #fff;
      }
    }
  }

  .banner-block{
    position: relative;
    z-index: 1;
  }

  .menu-block{
    margin: -40rpx 20rpx 20rpx;
    padding: 10rpx 0;
    border-radius: 4rpx;
    background-color: #fff;
    position: relative;
    z-index: 1;

    .menu-item{
      width: 20%;
      padding: 20rpx 0;
      display: inline-block;
      text-align: center;
      image{
        width: 80rpx;
        height: 80rpx;
      }
    }

    &.noBanner{
      margin-top: 20rpx;
    }

    &.bg{
      padding: 10rpx 20rpx;
      margin: -40rpx 0 0;
      border-radius: 0;
      background-color: rgba(0,0,0,0);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      &.noBanner{
        margin-top: 0;
      }
    }
  }

  .advertise-block{
    .advertise-item{
      margin-top: -2rpx;
      display: block;
    }
  }

  .notice-block {
    padding: 0 20rpx;
    background: #fff;
    .notice-swiper,
    .notice-item{
      height: 70rpx;
    }

    .notice-item{
      @include flex;
      @include a-center;
      color: #000;
      font-size: 24rpx;


      .title{
        font-weight: 500;
        padding-right: 20rpx;
        margin-right: 20rpx;
        position: relative;

        &::after{
          content: '';
          top: 6rpx;
          bottom: 6rpx;
          right: 0;
          position: absolute;
          border-right: 1px solid #999;
        }
      }
      .content{
        @include sub-item;
        @include text-ellipsis;
      }
      .btn{
        color: #999;
        padding-right: 12rpx;
      }

      image{
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
  
  .brand-block{
    .title-part{
      background: #fff;
      .title{
        font-size: 34rpx;
        padding: 24rpx;
        font-weight: bold;
      }
      .banner{
        padding-bottom: 20rpx;

        .uni-swiper__new-dots-box{
          bottom: 10rpx;
        }
      }

      &.hasBanner{
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F5F5F5 100%);
      }
    }
    .brand-list{
      padding: 10rpx;
      background: #fff;
      box-sizing: border-box;

      .brand-item{
        padding: 10rpx;
        width: 33.333333%;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;

        .image{
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .uni-swiper__new-dots-box{
        bottom: 8px;
        .uni-swiper__dots-item{
          background: #DDD;
          &.active{
            background: #000;
          }
        }
      }
    }
  }

  .material-sales-rank-block{
    .title{
      @include flex;
      @include a-center;

      color: #999;
      font-size: 24rpx;
      height: 100rpx;
      padding: 0 24rpx;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F5F5F5 100%);

      .sub-item{
        @include sub-item;
        @include flex;
        @include a-center;

        .title-item{
          font-size: 28rpx;
          margin-right: 36rpx;
          
          &.active{
            color: #000;
            font-size: 34rpx;
            font-weight: bold;
          }
        }

        
      }
      image{
        width: 24rpx;
        height: 24rpx;
        display: block;
      }
    }
    .rank-item{
      @include flex;
      @include a-center;

      margin-bottom: 20rpx;
      padding: 20rpx;
      background: #fff;
      position: relative;
      .photo{
        width: 220rpx;
        height: 220rpx;
      }
      .right-part{
        @include sub-item;
        color: #999;
        font-size: 24rpx;
        margin-left: 24rpx;

        .label{
          color: #000;
          font-size: 22rpx;
          font-weight: 400;
          padding: 4rpx 8rpx;
          border-radius: 2rpx;
          border: 1px solid #000;
          display: inline-block;
        } 
        .slogan{
          @include text-ellipsis-line;

          color: #000;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 38rpx;
          max-height: 76rpx;
          margin-top: 20rpx;
          margin-right: 20rpx;
        }
        .volume{
          font-size: 34rpx;
          &::before{
            content: '¥';
            font-size: 20rpx;
          }
        }
      }
      .icon{
        right: 20rpx;
        bottom: 20rpx;
        width: 60rpx;
        height: 60rpx;
        position: absolute;
      }
      
    }
  }

  .roll-banner-block{
    .uni-swiper__new-dots-box{
      bottom: 30rpx;
    }
  }

  // 分类推荐
  .cate-recommend-list{
    height: 100rpx;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    position: relative;
    .cate-recommend-item{
      @include flex(column, inline-flex);
      @include center;

      color: #999;
      font-size: 24rpx;
      text-align: center;
      font-weight: 500;
      height: 100rpx;
      line-height: 1;
      padding: 0 32rpx;
      position: relative;

      .title{
        color: #000;
        font-size: 28rpx;
      }
      .sub-title{
        padding: 4rpx 16rpx;
        margin-top: 10rpx;
        height: 32rpx;
        box-sizing: border-box;
        display: inline-block;

        &.disabled{
          opacity: 0;
        }
      }

      &:not(:last-child)::after{
        content: '';
        height: 40rpx;
        border-left: 1px solid #999;
        top: 40rpx;
        right: 0;
        position: absolute;
      }

      &.active{
        .title{
          font-weight: bold;
          position: relative;

          &.noSubTitle{
            &::after{
              content: '';
              left: 4rpx;
              right: 4rpx;
              bottom: -12rpx;
              position: absolute;
              border-bottom: 6rpx solid #000;
              border-radius: 3rpx;
            }
          }
        }
        .sub-title{
          color: #FFF;
          background: #000;
          border-radius: 5rpx;
        }
      }
    }
  }
  .hasSubTitle{
    .cate-recommend-list{
      height: 120rpx;
      .cate-recommend-item{
        height: 120rpx;
      }
    }
  }

  .goods-item {
    width: 100%;
    // padding: 10rpx;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    // margin-bottom: 20rpx;
    .bg{
      background-color: #fff;

      .item-image{
        height: 345rpx;
        display: block;
      }
      .content{
        padding: 26rpx 20rpx;
        .item-name{
          @include text-ellipsis-line;
          color: #000;
          font-size: 26rpx;
          line-height: 30rpx;
          max-height: 60rpx;
        }
        .item-commission{
          color: #F10C39;
          font-size: 22rpx;
          padding: 5rpx 10rpx;
          margin-top: 12rpx;
          border: 1px solid #F10C3A;
          border-radius: 4rpx;
          display: inline-block;
        }
        .item-footer{
          @include flex;
          @include j-between;
          margin-top: 32rpx;

          .price{
            color: #000;
            font-size: 28rpx;
            font-weight: 400;
            &::before{
              content: '¥';
              font-size: 20rpx;
            }
          }
          .sale{
            color: #999;
            font-size: 22rpx;
          }
        }
      }
    }
    
    &.mini{
      .content{
        margin-top: -60rpx;
        background: #fff;
        position: relative;
        z-index: 2;
      }
    }
  }

  // 首页弹窗
  .home-pop{
    @include mask;
    @include center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;

    .pop-content{
      width: 72%;
      height: 720rpx;
      position: relative;
    }

    .pop-img{
      width: 100%;
      height: 100%;
    }
    .close-btn{
      width: 60rpx;
      height: 60rpx;
      top: 750rpx;
      left: 50%;
      margin-left: -30rpx;
      position: absolute;
    }
  }

  // 红包雨活动弹窗
  .red-packet {
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    .close-btn-red {
      width: 60rpx;
      height: 60rpx;
      margin-top: 32rpx;
    }
  }

  // 新用户专享
  .new-member-block {
    position: fixed;
    left: 50%;
    width:718rpx;
    // height: 281rpx;
    z-index: 99;
    margin-left: -359rpx;
    bottom: 110rpx;
    bottom: calc(110rpx + constant(safe-area-inset-bottom));
    bottom: calc(110rpx + env(safe-area-inset-bottom));
    .new-close-icon {
      position: absolute;
      top: -30rpx;
      right: -30rpx;
      padding: 20rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
  }

  // 热分享滚动列表
  .hot-share-list{
    height: 60rpx;
    // top: 200rpx;
    left: 30rpx;
    right: 0;
    position: fixed;
    z-index: 9;
    swiper-item,
    .swiper-item{
      height: 60rpx;
    }
    .swiper-item{
      @include flex;
      @include a-center;
      .sub-item{
        @include text-ellipsis;
        color: #fff;
        font-size: 20rpx;
        width: 336rpx;
        line-height: 48rpx;
        height: 48rpx;
        margin-left: 10rpx;
        padding-left: 28rpx;
        background-size: 100% auto;
      }
    }

    image{
      width: 60rpx;
      height: 60rpx;
      border-radius: 30rpx;
      overflow: hidden;
    }
  }
  
  .box-content{
    background-color: #f5f5f5;

    .box-block{
      .box-block-title{
        @include flex(column);
        @include a-center;
        @include j-center;
        height: 170rpx;
        color: #666;
        font-size: 26rpx;
        // 68
        .main{
          color: #000;
          font-size: 48rpx;
          font-weight: 800;
          margin-bottom: 20rpx;
          &::before, &::after{
            content: '一';
            margin: 20rpx;
          }
        }
      }
      .box-block-content {
        .box-block-container{
          background: linear-gradient(to bottom, #fff,#fff 50%,#f5f5f5 50%, #f5f5f5);
          padding: 20rpx 20rpx 0 20rpx;
          .title-box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 34rpx;
            height: 110rpx;
            line-height: 55rpx;
            font-weight: bold;
            .in-icon{
              flex: 0 0 52rpx;
              width: 52rpx;
              height: 8rpx;
            }
          }
        }
        .box-block-package-black{
          background: #000;
          .title-box{
            color: white;
          }
        }
        
      }
      .box-img-item{
        display: block;
      }
    }
  }
}